jQuery浏览器功能测试support

浏览器功能测试模块是其他模块的基础。
一般解决浏览器不兼容问题有两种方式：浏览器嗅觉和浏览器功能测试。
jQuery.support 有34个测试项，包括DOM测试（15个），样式测试（3个），事件测试（4个），Ajax测试（2个），盒模型测试（10个）

查看测试项的结果：

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Document</title>
</head>
<body>
<div id="release"></div>
<script type="text/javascript" src="jquery-1.7.1.js"></script>    
<script type="text/javascript">
$(function(){
     var result = '', counter = 0;
     for (var n in $.support){
          result += '<li>' + n +":"+$.support[n] + "</li>";
     }

     $("#release").html('<ol>'+result + '<ol>');
});
</script>
</body>
</html>


* leadingWhitespace:true
* tbody:true
* htmlSerialize:true
* style:true
* hrefNormalized:true
* opacity:true
* cssFloat:true
* checkOn:true
* optSelected:true
* getSetAttribute:true
* enctype:true
* html5Clone:true
* submitBubbles:true
* changeBubbles:true
* focusinBubbles:false
* deleteExpando:true
* noCloneEvent:true
* inlineBlockNeedsLayout:false
* shrinkWrapBlocks:false
* reliableMarginRight:true
* noCloneChecked:true
* optDisabled:true
* radioValue:true
* checkClone:true
* appendChecked:true
* ajax:true
* cors:true
* reliableHiddenOffsets:true
* boxModel:true
* doesNotAddBorder:true
* doesAddBorderForTableAndCells:true
* fixedPosition:true
* subtractsBorderForOverflowNotVisible:false
* doesNotIncludeMarginInBodyOffset:true

总体结构

jQuery.support = (function() {
     var support,
     support = {
          // IE strips leading whitespace when .innerHTML is used
          leadingWhitespace: ( div.firstChild.nodeType === 3 ),

          // Make sure that tbody elements aren't automatically inserted
          // IE will insert them into empty tables
          tbody: !div.getElementsByTagName("tbody").length,

          // Make sure that link elements get serialized correctly by innerHTML
          // This requires a wrapper element in IE
          htmlSerialize: !!div.getElementsByTagName("link").length,

          // Get the style information from getAttribute
          // (IE uses .cssText instead)
          style: /top/.test( a.getAttribute("style") ),

          // Make sure that URLs aren't manipulated
          // (IE normalizes it by default)
          hrefNormalized: ( a.getAttribute("href") === "/a" ),

          // Make sure that element opacity exists
          // (IE uses filter instead)
          // Use a regex to work around a WebKit issue. See #5145
          opacity: /^0.55/.test( a.style.opacity ),

          // Verify style float existence
          // (IE uses styleFloat instead of cssFloat)
          cssFloat: !!a.style.cssFloat,

          // Make sure that if no value is specified for a checkbox
          // that it defaults to "on".
          // (WebKit defaults to "" instead)
          checkOn: ( input.value === "on" ),

          // Make sure that a selected-by-default option has a working selected property.
          // (WebKit defaults to false instead of true, IE too, if it's in an optgroup)
          optSelected: opt.selected,

          // Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7)
          getSetAttribute: div.className !== "t",

          // Tests for enctype support on a form(#6743)
          enctype: !!document.createElement("form").enctype,

          // Makes sure cloning an html5 element does not cause problems
          // Where outerHTML is undefined, this still works
          html5Clone: document.createElement("nav").cloneNode( true ).outerHTML !== "<:nav></:nav>",

          // Will be defined later
          submitBubbles: true,
          changeBubbles: true,
          focusinBubbles: false,
          deleteExpando: true,
          noCloneEvent: true,
          inlineBlockNeedsLayout: false,
          shrinkWrapBlocks: false,
          reliableMarginRight: true
     };

     support.noCloneChecked = input.cloneNode( true ).checked;
     support.optDisabled = !opt.disabled;
     support.deleteExpando = false;
     ....

     jQuery(function() {

          support.reliableHiddenOffsets = isSupported && ( tds[ 0 ].offsetHeight === 0 );
          ...
          jQuery.extend( support, offsetSupport );
     });

     (function(){
          jQuery.extend(jQuery.support, {
               ajax: !!xhr,
               cors: !!xhr && ("withCredentials" in xhr)
          });
     });
     return support;
})();

jQuery浏览器功能测试support

总体结构

小渝人儿

引用和评论

更简单的理解Pod和容器

采用测试驱动开发理念(Test Driven Development)进行 SAP UI5 应用的功能开发(二)试读版